<template>
	<router-view v-slot="{ Component, route }">
		<keep-alive :include="cachedViews">
			<component :is="Component" :key="route.path" v-if="$route.meta.keepAlive" />
		</keep-alive>
		<component :is="Component" :key="route.path" v-if="!$route.meta.keepAlive" />
		<loading></loading>
	</router-view>
</template>

<script lang="ts">
	import { useRoute } from 'vue-router'
	import store from '@/store'
	const route = useRoute()

	export default defineComponent({
		name: 'App',
		setup() {
			const router = useRouter()
			const state = reactive({
				cachedViews: [] as any,
				active: 0 as number,
				key: {} as any
			})
			state.cachedViews = ['confirmOrder', 'posList', 'addressList', 'bankList', 'addService', 'trading', 'editSettlement', 'shareData', 'earningDetail', 'merchants','quantitative','checkStatistics','terminalList']
			// console.log(state.cachedViews)
			localStorage.getItem('userMsg') &&
				store.replaceState(Object.assign(store.state, JSON.parse(localStorage.getItem('userMsg'))))

			//在页面刷新时将vuex里的信息保存到localStorage里
			window.addEventListener('beforeunload', () => {
				localStorage.setItem('userMsg', JSON.stringify(store.state))
			})

			return {
				...toRefs(state)
			}
		}
	})
</script>

<style>
	.van-nav-bar .van-icon {
		color: #000;
	}
	.dis{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dia{
		display: flex;
		align-items: center;
	}
	.dic{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#app {
		position: relative;
		font-size: 14px;
		//overflow: scroll;
		//height: 100%;
		background-color: #f7f8fa;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		opacity: 1;
	}

	::-webkit-scrollbar {
		width: 0 !important;
	}

	::-webkit-scrollbar {
		width: 0 !important;
		height: 0;
	}
</style>